<template>
  <div>
      <h2>欢饮光临_vue开发的收银系统_水果店</h2>
    <table border="1">
      <th>
        <td>苹果10￥/斤，折扣&lt;8折&gt;</td>
      </th>
      <tr>
        <td>请输入你要购买的斤数: <input v-model="num" type="number"></td>
      </tr>
      <tr>
        <td><button @click="btn">结账买单</button></td>
      </tr>
      <tr>
        <td>结账单：总价{{money}}￥元折后价{{0.8*money}}￥元省了￥{{0.2*money}}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "Day02VuecliDemoApp",

  data() {
    return {
      num: "",
      money: "",
    };
  },

  mounted() {},

  methods: {
    btn() {
      this.money = this.num * 10;
    },
  },
};
</script>

<style scoped>
table,
h2 {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}
h2 {
  margin-top: 100px;
}
td {
  display: block;
}
th,
tr,
td {
  width: 100%;
}
</style>